<template>
<!--packageA/pages/store_msg/store_msg.wxml-->
<view>
  <!-- 基础信息 -->
  <view class="msg">
    <text class="msg-text">基础信息</text>
  </view>

  <!-- 店铺信息 -->
	<form action="" @submit="formSubmit">
		<view class="storeMsg">
		  <view class="storeMsg-1">
		    <text>店铺图标</text>
		    <view class="storeMsg-1-log">
		      <view class="logetext">
		        <text>店铺LOGO</text>
		      </view>
		    </view>
		  </view>
		
		  <view class="storO">
		    <text>店铺名称</text>
		    <input type="text" placeholder="请输入门店服务人姓名" name='name' v-model="formdata.name"></input>
		  </view>
		
		  <view class="storeMsg-3 stormsg" >
		    <text>店铺编号</text>
			<view style="display: flex;justify-content: flex-end;">
				<text>SC02800001</text>
			</view>
		    
		  </view>
		
		  <view class="storeMsg-4 stormsg">
		    <text>主营服务</text>
		    <view  @click="open()" class="choose">
				<text>{{storeFunction}}</text>
		      <image src="/static/images/jiantou.png"></image>
		    </view>
		  </view>
		
		  <view class="storeMsg-5 stormsg" style="  border-bottom:1px solid transparent" @click="getAddress()">
		    <text>店铺地址</text>
			<text style="font-size: 24rpx;font-family: PingFang SC;font-weight: 400;color: #979797;flex: 4;">{{address}}</text>
			<view>
				<image src="/static/images/jiantou.png" style="width: 30rpx;height: 30rpx;"></image>
			</view>
		    
		  </view>
		</view>
		
		<!-- 店主信息 -->
		<view class="storeOwner">
		  店主信息<text>(方便顾客/平台与您联系)</text>
		</view>
		
		<!-- 店主信息2 -->
		<view class="storeOwner-2 ">
		  <view class="storO">
		    <text>联系人</text> 
		    <input type="text" placeholder="请输入门店服务人姓名" name='tel_name' v-model="formdata.tel_name"></input>
		  </view>
		  <view class="storO">
		    <text>手机号</text>
		    <input type="number" placeholder="请输入门店服务电话" name='phone' v-model="formdata.phone"></input>
		  </view>
		  <view class="storO">
		    <text>微信号</text>
		    <input type="text" placeholder="请输入门店服务微信"  name='wx' v-model="formdata.wx"></input>
		  </view>
		  <view class="storO">
		    <text>邮箱</text>
		    <input type="email" placeholder="请输入门店服务邮箱" name='email' v-model="formdata.email"></input>
		  </view>
		</view>
			
		<view class="width-gary">
		</view>
		<view class="save">
			<button form-type="submit" plain="">保存</button>
		</view>
	</form>

  <uni-popup type="bottom" ref='choose_type'>
  	<view class="typeBox">
		<text :class="{'cur': rSelect.indexOf(index)!=-1}" v-for="(value,index) in infoArr" :key="index" @tap="tapInfo(index)">{{value.name}}</text>
	</view>
  </uni-popup>
</view>
</template>

<script>

export default {
  data() {
    return {
		formdata:{
			name:'',
			address:'',
			tel_name:'',
			phone:'',
			wx:'',
			email:''
		},
		 rSelect:[],
		infoArr:[
					{name:'美发'},
					{name:'美容'},
					{name:'美甲'},
					{name:'美体'},
					{name:'美妆'},
					{name:'其他'}
					
				],
		address:'请选择店铺地址',
		storeFunction:''
	};
  },

  components: {},
  props: {},


  methods: {
	  //添加log
	  addphoto(){
	  	uni.chooseImage({
	  		count:1,
	  		success: (res) => {
	  			console.log(res)
	  			let file = res.tempFilePaths
	  			console.log(file)
	  			// return 
	  			const token = uni.getStorageSync('token')
	  			uni.uploadFile({
	  				filePath:file[0],
	  				url:'http://192.168.5.115:8080/shop/addPhoto',
	  				name:'multipartFile',
	  				formData:{
	  					user:'test'
	  				},
	  				header:{
	  					token
	  				},
	  				success:(ress)=>{
	  					console.log(ress)
	  				},
	  				fail:(err=>{
	  					console.log(err)
	  				})
	  				
	  			})
	  		}
	  	})
	  },
	  //保存
	    formSubmit(e) {
				// console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
	                  var formdata = e.detail.value
					  //验证手机号码
					   var  re = /^1\d{10}$/
					    if (re.test(formdata.phone)) {
					      
					    } else {
					     uni.showToast({
					     	icon:'none',
					     	title:'手机号输入有误'
					     })
					     return
					    }
						//验证邮箱
						let email = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
						  if(email.test(formdata.email)){
						  
						  }else{
						    uni.showToast({
						     	icon:'none',
						     	title:'邮件格式错误'
						     })
						     return
						    }
						  
					  for(let key in formdata){
						  console.log(formdata[key])
						  if(formdata[key]==''){
							  uni.showToast({
							  	icon:'none',
								title:'请检查输入信息是否完成'
							  })
							  return
						  }
					  }
	                 console.log(formdata)
	              },
	//打开弹出层
	open(){
		this.rSelect=[]
		this.$refs.choose_type.open()
	},
	//选择内容
	 tapInfo(e) {
		 
		if (this.rSelect.indexOf(e) == -1) {
			console.log(e)//打印下标
			
			
			this.rSelect.push(e);//选中添加到数组里
			let arr = []
			
				for(let j = 0;j<this.rSelect.length;j++){
					arr.push(this.infoArr[this.rSelect[j]].name)
				}
				
			
			this.storeFunction=arr.join('、')
			
			        } else {
				 this.rSelect.splice(this.rSelect.indexOf(e), 1); //取消
				    }
	},
	//获取地址
	getAddress(){
		let that =this
		uni.chooseLocation({
			success: (res) => {
				console.log(res)
				that.address = res.address
			}
		})
	}
	  
  }
};
</script>
<style>
@import "./store_msg.css";
</style>
<style scoped lang="less">
	.save{
		height: 94rpx;
		text-align: center;
		line-height: 94rpx;
		
		button{
			background-color: #00C6C2;
			font-size: 36rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #FFFFFF;
			border-radius: none;
			    border: none;
		}
		text{
			
			
		}
	}
	//弹出
	.typeBox{
		// width: 100%;
		padding: 25rpx 25rpx;
		height: 600rpx;
		background-color: white;

		text{
			width: 100rpx;
			height: 58rpx;
			background: #F4F4F4;
			border-radius: 4rpx;
			display: inline-block;
			padding: 5rpx 5rpx;
			margin-right: 35rpx;
			text-align: center;
			margin-bottom: 20rpx;
		}
		// justify-content: space-around;
	}
	.choose{
		// width: 75%;
		display: flex;
		justify-content: flex-end;
	}
	
	
	.cur {
		color: white;
		// display: inline-block;
		// border: 1px solid #e5e5e5;
		background-color:#00C6C2!important;
	}
</style>